<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
"/>

<link rel="stylesheet" th:href="@{/dist/lib/weui.min.css}" />
<link rel="stylesheet" th:href="@{/dist/css/jquery-weui.min.css}" />
<link rel="stylesheet" th:href="@{/dist/demos/css/demos.css}" />
<script type="text/javascript" th:src="@{/dist/lib/jquery-2.1.4.js}" ></script>
<script type="text/javascript" th:src="@{/dist/js/jquery-weui.js}" ></script>
<script type="text/javascript" th:src="@{/dist/lib/fastclick.js}" ></script>
<link rel="stylesheet" th:href="@{/adminltecss/userl.css}" />
<link rel="stylesheet" href="/dist/lib/weui.min.css" />
<link rel="stylesheet" href="/dist/css/jquery-weui.min.css" />
<link rel="stylesheet" href="/dist/demos/css/demos.css" />
<script type="text/javascript" src="/dist/lib/jquery-2.1.4.js" ></script>
<script type="text/javascript" src="/dist/js/jquery-weui.js" ></script>
<script type="text/javascript" src="/dist/lib/fastclick.js" ></script>
<script type="text/javascript" src="/src/lib/echarts.js"></script>
<script type="text/javascript" src="/src/lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/src/js/json2.js"></script>
<link rel="stylesheet" href="/adminltecss/userl.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <style>
   	.cusmar{
  		margin-left: 40px;
  	}
  	.header-wai{
  		position: fixed;top:0px; height:60px;background-color: #363436;
  	}
   </style>

  </head>
  <body ontouchstart>
  <input type="hidden" id="eid" th:value="${eid}"/>
  <div class="weui-grids main-typ" >
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->  
    <br>
  <div id="main" class="weui-grids main-typ" style="width: 100%;height:500px;"></div>
  </div>
    <script type="text/javascript">
    var chartOutChar = null;
    var option1 = {
    		 title: {
    		        text: '个人业绩统计',
    		        subtext: '数据来自公司内部webapp',
    		        left:"40" 
       		        
    		    },
    		    tooltip: {
    		        trigger: 'axis',
    		        axisPointer: {
    		            type: 'shadow'
    		        }
    		    },
    		    toolbox: {
    		    	right:"40",
  		          feature: {
  		              dataView: {show: true, readOnly: false},
  		              magicType: {show: false, type: ['line', 'bar']},
  		              restore: {show: true},
  		              saveAsImage: {show: true}
  		          }
  		      },
    		    legend: {
    		        data: ['套数', '面积','金额'],
    		        top:'70'
    		    },
    		    grid: {
    		    
    		        left: '1%',
    		        right: '14%',
    		        bottom: '12%',
    		        containLabel: true
    		    },
    		    xAxis: {   		    
    		        type: 'value',
    		        name:'数值',
    		        boundaryGap: [0, 0.01]
    		    },
    		    yAxis: {
    		        type: 'category',
    		        nameLocation:'end',
    		        name:'业绩',   		           		        
    		        data:[],
    		        nameTextStyle:{
    		        	fontFamily:'8'
    		        	
    		        },
    		        nameGap:0
    		        
    		    
    		    },
    		    series: [
    		        {
    		            name: '套数',
    		            type: 'bar',
    		            data:[],
    		        barMinHeight:'10'
    		        },
    		        {
    		            name: '面积',
    		            type: 'bar',
    		            data:[],
    		            barMinHeight:'100'
    		        },
    		        {
    		            name: '金额',
    		            type: 'bar',
    		            data: []
    		        }
    		    ]
  		  };
   function loadChartOut(url,data) {
	    $.ajax({
	    	url:url,
	    	type:"post",
	    	data:JSON.stringify(data),
	    	contentType:"application/json;charset=utf-8",
	    	dataType:"json",
	    	success:function(data){
	    		 if (data!=null) { 
	   	            chartOutChar.showLoading({text: '正在努力的读取数据中...'});
	   	            chartOutChar.setOption({
	   	            	yAxis:{
	   	            		name:'姓名',
	   	            		data:data.name
	   	            		
	   	            	},
	   	                series: [
	   	                    {
	   	                        name:'套数',
	   	                        data:data.rank
	   	                    },
	   	                    {
	   	                        name:'面积',
	   	                        data:data.harea
	   	                    },
	   	                    {
	   	                        name:'金额',
	   	                        data:data.eprice
	   	                    }
	   	                ]
	   	            });
	   	            chartOutChar.hideLoading();
	   	        }else {
	   	            alert('提示', data.msg);
	   	        }  
	    	}
	    });
  	}


  	//载入图表
  	  $(function (){
  		 // var charts=[];
  	    chartOutChar = echarts.init(document.getElementById('main'));
  	    chartOutChar.setOption(option1);
  	  	//charts.push(chartOutChar);
  	  	var eid=document.getElementById('eid').value;
  	  	var data={};
  	  	var url="/wxSearch";
  	  	data.eid=eid;
  	    loadChartOut(url,JSON.stringify(data));
  	  window.addEventListener('resize', function () {
  	    	
  		chartOutChar.resize();
  	        
  	    }); 
  	  
  	    
  	});
  		</script>
  	
  	</body>
  </html>